<template>
	<view id="info">
		<view class="dataLine">
			<view class="label align-l bold">合作商名称：</view>
			<view class="data align-r">{{userinfo.contractName}}</view>
		</view>
		<view class="dataLine">
			<view class="label align-l bold">法人：</view>
			<view class="data align-r">{{userinfo.legal}}</view>
		</view>
		<view class="dataLine">
			<view class="label align-l bold">主要负责人：</view>
			<view class="data align-r">{{userinfo.name}}</view>
		</view>
		<view class="dataLine">
			<view class="label align-l bold">联系方式：</view>
			<view class="data align-r">{{userinfo.mobile}}</view>
		</view>
		<view class="dataLine">
			<view class="label align-l bold">邮箱：</view>
			<view class="data align-r">{{userinfo.email}}</view>
		</view>
		<view class="dataLine">
			<view class="label align-l bold">银行卡照片：</view>
			<view class="data align-r s-flex-r-e-c" style="display:flex">
				<view style="width:200rpx;height:120rpx;margin:10rpx;position:relative;">
					<image :src="userinfo.bankImg" style="width:100%;height:100%;border:1rpx solid #CCC;border-radius: 10rpx;"
						@click="showPic(3)"></image>
				</view>
			</view>
		</view>
		<view class="dataLine">
			<view class="label align-l bold">银行卡号：</view>
			<view class="data align-r"><input class="fs26" type="text" :disabled="true" v-model="userinfo.bankCard" placeholder=""></view>
		</view>
		<view class="dataLine">
			<view class="label align-l bold">开户行：</view>
			<view class="data align-r"><input class="fs26" type="text" :disabled="true" v-model="userinfo.bank" placeholder=""></view>
		</view>
		<view class="dataLine">
			<view class="label align-l bold">开户支行：</view>
			<view class="data align-r"><input class="fs26" type="text" :disabled="true" v-model="userinfo.subbranch" placeholder=""></view>
		</view>
		<view class="dataLine">
			<view class="label align-l bold">持卡人：</view>
			<view class="data align-r"><input class="fs26" type="text" :disabled="true" v-model="userinfo.bankName" placeholder=""></view>
		</view>
		<view class="dataLine">
			<view class="label align-l bold">预留手机号：</view>
			<view class="data  s-flex-r-e-c" v-if="isEdit">
				<input class="border1" type="number" v-model="bankMobile" maxlength="11" placeholder="请输入预留手机号">
				<u-button class="ml10" type="primary" size="mini" @click="isEdit=false">保存</u-button>
			</view>
			<view class="data s-flex-r-e-c" v-else>
				<text class="flex1 align-r">{{bankMobile}}</text>
				
				<u-button v-if="userinfo.isConfirm != 2" class="ml10" type="primary" size="mini" @click="isEdit=true">编辑</u-button>
			</view>
		</view>
		<view class="dataLine">
			<view class="label align-l bold">身份证(正)：</view>
			<view class="data s-flex-r-e-s">
				<view style="width:200rpx;height:120rpx;" v-if='cardZheng'>
					<image :src="cardZheng" style="width:100%;height:100%;border:1rpx solid #CCC;border-radius: 10rpx;"
						@click="showPic(1)"></image>
				</view>
				<u-button v-if="userinfo.isConfirm != 2" class="ml20 mr0" type="primary" size="mini" @click="upload(1)">上传</u-button>
			</view>
		</view>
		<view class="dataLine">
			<view class="label align-l bold">身份证(反)：</view>
			<view class="data s-flex-r-e-s">
				<view style="width:200rpx;height:120rpx;margin:10rpx;position:relative;" v-if='cardFan'>
					<image :src="cardFan" style="width:100%;height:100%;border:1rpx solid #CCC;border-radius: 10rpx;"
						@click="showPic(2)"></image>
				</view>
				<u-button v-if="userinfo.isConfirm != 2" class="ml20 mr0" type="primary" size="mini" @click="upload(2)">上传</u-button>
			</view>
		</view>
		<view class="dataLine">
			<view class="label align-l bold">身份证号：</view>
			<view class="data  s-flex-r-e-c" v-if="isEdit1">
				<input class="border1" type="text" v-model="Identity" placeholder="">
				<u-button v-if="userinfo.isConfirm != 2" class="ml10" type="primary" size="mini" @click="isEdit1=false">保存</u-button>
			</view>
			<view class="data s-flex-r-e-c" v-else>
				<text class="flex1 align-r">{{Identity}}</text>
				<u-button v-if="userinfo.isConfirm != 2" class="ml10" type="primary" size="mini" @click="isEdit1=true">编辑</u-button>
			</view>
		</view>
		<view class="dataLine">
			<view class="label align-l bold">身份证地址：</view>
			<view class="data  s-flex-r-e-c" v-if="isEdit2">
				<input class="border1" type="text" v-model="idcartAddress" placeholder="">
				<u-button class="ml10" type="primary" size="mini" @click="isEdit2=false">保存</u-button>
			</view>
			<view class="data s-flex-r-e-c" v-else>
				<text class="flex1 align-r">{{idcartAddress}}</text>
				<u-button v-if="userinfo.isConfirm != 2" class="ml10" type="primary" size="mini" @click="isEdit2=true">编辑</u-button>
			</view>
		</view>
		<view v-if="userinfo.isCorporateAccount==1">
			<view style="padding:30rpx;">对公结算信息</view>
			<view class="dataLine">
				<view class="label align-l bold">开户许可证：</view>
				<view class="data align-r" style="display:flex">
					<view style="width:200rpx;height:120rpx;margin:10rpx;position:relative;">
						<image :src="bankImg1"
							style="width:100%;height:100%;border:1rpx solid #CCC;border-radius: 10rpx;" v-if='bankImg1'
							@click="showPic(4)"></image>
						<image src="../../static/my/bank_a.png"
							style="width:100%;height:100%;border:1rpx solid #CCC;border-radius: 10rpx;" v-else
							@click='upload(4)'></image>
						<text class="iconfont icon-close"
							style="position:absolute;top:-12px;right:-5px;color:#009AFF;z-index:999;" v-if='bankImg1'
							@click.prevent="delImg(4)"></text>
					</view>
				</view>
			</view>
			<view class="dataLine">
				<view class="label align-l bold">预留手机号：</view>
				<view class="data align-r"><input type="text" :disabled="true" v-model="bankMobile1" placeholder="">
				</view>
			</view>
		</view>

		<view style="padding:10rpx 0;text-align:center;color:#FF0000;font-size:14px;">请仔细核对个人信息，以免影响分润发放</view>
		<view style="padding:15rpx">
			<view class="sureBtn disabled" v-if='userinfo.isConfirm == 2'>已确认</view>
			<view class="sureBtn" v-else @click='sureName()'>确认</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEdit: false,
				isEdit1: false,
				isEdit2: false,
				userinfo: '',
				cardZheng: '', //身份证正面照
				cardFan: '', //身份证反面照
				bankImg: '', //银行卡照片
				bankName: '', //身份证名字、银行认证名字
				Identity: '', //身份证号
				idcartAddress: '', //身份证地址
				bank: '', //开户行
				bankCard: '', //银行卡号
				bankMobile: '', //银行预留手机
				ic: '',
				bankId: '', //银行id

				bank1: '', //开户行
				bankId1: '', //银行卡图片
				bankCard1: '', //银行卡号
				bankName1: '', //户名
				bankImg1: '',
				bankMobile1: '', //预留手机
			}
		},
		onLoad(option) {
			this.getUserInfo()
		},
		methods: {
			delImg(i) {
				if (i == 1) {
					this.cardZheng = '';
					this.Identity = ''
					this.idcartAddress = ''

				} else if (i == 2) {
					this.cardFan = '';
				} else if (i == 3) {
					this.bankImg = ''
					this.bank = ''
					this.bankCard = ''
					this.bankId = ''
				} else if (i == 4) {
					this.bankImg1 = ''
				}
			},
			getUserInfo() {
				this.httpClient.post('agents/app/agent/getUserInfoForApp', {}).then(res => {
					if (res.code == 200) {
						console.info(res.data)
						this.userinfo = res.data
						if(res.data.isConfirm!=2){
							uni.setNavigationBarTitle({
								title:"个人信息确认"
							})
						}
						uni.setStorageSync("userinfo", res.data)
						//初始赋值
						//身份证正面照
						this.cardZheng = res.data.frontPhoto
						//身份证反面照
						this.cardFan = res.data.reversePhoto
	
						this.bank = res.data.bank
						//身份证号
						this.Identity = res.data.identity1
						//身份证地址
						this.idcartAddress = res.data.idcartaddress
						//银行卡照片
						this.bankImg = res.data.bankImg
						//开户行
						this.bank = res.data.bank
						//绑定手机号
						this.bankMobile = res.data.bankMobile
						//银行卡号
						this.bankCard = res.data.bankCard
						//bankId
						this.bankId = res.data.bankId
						//
						this.bankName = res.data.bankName
						this.bankName1 = res.data.bankName1
						//银行卡照片
						this.bankImg1 = res.data.bankImg1
						//开户行
						this.bank1 = res.data.bank1
						//绑定手机号
						this.bankMobile1 = res.data.bankMobile1
						//银行卡号
						this.bankCard1 = res.data.bankCard1
						//bankId
						this.bankId1 = res.data.bankId1
					}
				})
			},
			upload(i) {
				let that = this
				let flag = ''
				let url = ''
				if (i == 1) {
					flag = 1
					url = 'agents/app/agent/index/uploadAgentID'
				} else if (i == 2) {
					flag = 2
					url = 'agents/app/agent/index/uploadAgentID'
				} else if (i == 3) {
					url = 'agents/app/agent/index/uploadBankcard'
				} else if (i == 4) {
					url = 'file/uploadImg'

				}
				uni.chooseImage({
					count: 1,
					sizeType: 'compressed',
					success: (chooseImageRes) => {
						let imgPath = chooseImageRes.tempFilePaths[0];
						this.httpClient.upload(url, {
							name: 'file',
							filePath: imgPath,
							flag: flag
						}).then(res => {
							if (res.code == 200) {
								if (i == 1) {
									that.bankName = res.data.ocr.name //身份证名，认证名
									that.idcartAddress = res.data.ocr.address //身份证地址
									that.Identity = res.data.ocr.num //身份证号
									that.cardZheng = res.data.src //正面照片

									console.info(that.cardZheng)
								} else if (i == 2) {
									that.cardFan = res.data.src //反面照片
								} else if (i == 3) {
									if (res.data.code == "1") {
										that.bank = res.data.bank_name
										that.bankCard = res.data.no.replace(/\s*/g, '')
										//卡图片地址
										that.bankImg = res.data.url
										//id:
										that.bankId = res.data.bank_id
									} else {
										uni.showToast({
											title: res.data.msg,
											icon: 'none'
										})
									}
								} else if (i == 4) {
									that.bankImg1 = res.data.url
								}
							}
						})

					}
				})
			},
			showPic(i) {
				let imgUrl = []
				if (i == 1) {
					imgUrl = [this.cardZheng]
				} else if (i == 2) {
					imgUrl = [this.cardFan]
				} else if (i == 3) {
					imgUrl = [this.bankImg]
				} else if (i == 4) {
					imgUrl = [this.bankImg1]
				}
				uni.previewImage({
					urls: imgUrl,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				})
			},
			sureName() {
				// 如果 、银行卡号bankCard、开户行bank1、持卡人bankName 没有需要联系业务经理变更
				if(!this.bankCard){
					return uni.showToast({
						icon: 'none',
						title: '缺少银行卡号，请联系业务经理变更信息！'
					})
				}
				if(!this.bank){
					return uni.showToast({
						icon: 'none',
						title: '缺少开户行，请联系业务经理变更信息！'
					})
				}
				if(!this.bankName){
					return uni.showToast({
						icon: 'none',
						title: '缺少持卡人，请联系业务经理变更信息！'
					})
				}
				// if (!this.bankImg) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请上传银行卡！'
				// 	})
				// 	return
				// }
				if (!this.cardZheng) {
					uni.showToast({
						icon: 'none',
						title: '请上传身份证正面照片！'
					})
					return
				}
				if (!this.cardFan) {
					uni.showToast({
						icon: 'none',
						title: '请上传身份证正面照片！'
					})
					return
				}
				if (!this.Identity) {
					uni.showToast({
						icon: 'none',
						title: '未识别出身份信息！'
					})
					return
				}
				// if(this.userinfo.legal!=this.bank){
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '身份信息与预留信息不一致，请重新上传！'
				// 	})
				// 	return
				// }
				if (!this.bankMobile) {
					uni.showToast({
						icon: 'none',
						title: '请填写银行预留手机号码！'
					})
					return
				}
				if (!this.idcartAddress) {
					uni.showToast({
						icon: 'none',
						title: '请填写身份证地址'
					})
					return
				}
				// if (!this.bankCard) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '未识别到银行卡号！'
				// 	})
				// 	return
				// }
				this.httpClient.postJson('agents/app/agent/Agent/sureUserInfo', {
					identity1: this.Identity, //身份证号
					frontPhoto: this.cardZheng, //身份证正面照片
					reversePhoto: this.cardFan, //身份证反面照片
					idcartaddress: this.idcartAddress, //身份证地址
					bankMobile: this.bankMobile, //预留手机号
					// bank: this.bank, //开户行
					// bankId: this.bankId, //银行卡图片
					// bankCard: this.bankCard, //银行卡号
					// bankName: this.bankName, //户名
					// bankImg: this.bankImg,
					// bank1: this.bank1, //开户行
					// bankId1: this.bankId1, //银行卡图片
					// bankCard1: this.bankCard1, //银行卡号
					// bankName1: this.bankName1, //户名
					// bankImg1: this.bankImg1,
					// bankMobile1: this.bankMobile1, //预留手机
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '操作成功，感谢您的配合！'
						})
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 1500)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	#info {
		font-size: 26rpx;

		.dataLine {
			padding: 20rpx;
			background: #FFF;
			margin-bottom: 2rpx;
			display: flex;
			align-items: center;

			.label {
				width: 250rpx;
				text-align: right;
				color: #000;
			}
			.border1{
				padding: 4rpx 10rpx;
				border: 1rpx solid #888;
				font-size: 26rpx;
				height: 50rpx;
			}
			.data {
				flex: 1;

				.btns {
					padding: 10rpx;
					background: #3aacff;
					color: #fff;
					font-size: 24rpx;
					border-radius: 10rpx;
				}

				img {
					width: 100rpx;
					height: 60rpx;
					display: inline-block;
					border-radius: 5rpx;
				}
			}
		}

		.sureBtn {
			background: #3aacff;
			text-align: center;
			color: #fff;
			line-height: 80rpx;
			border-radius: 20rpx;
			margin: 30rpx;
		}

		.disabled {
			background: #CCC;
		}
	}
</style>